<template>
  <!-- 运营位 -->
  <view class="action-box" :style="{ bottom: safeAreaInsetsBottom }">
    <!-- 1.头像 -->
    <view class="avatar-box">
      <image class="avatar" :src="dramaCover" mode="aspectFill"></image>
    </view>
    <!-- 2.追剧 -->
    <view class="action-item" @click="emits('chasingClick')">
      <image class="action-img" :src="isChasing ? '/static/images/video/ico_fav_on.svg' : '/static/images/video/ico_fav.svg'"></image>
      <text class="action-text">{{ isChasing ? '已追' : '追剧' }}</text>
    </view>
    <!-- 4.分享 -->
    <!-- #ifdef MP -->
    <button openType="share" class="action-item" :plain="true">
      <image src="/static/images/video/ico_share.svg" class="action-img"></image>
      <text class="action-text">分享</text>
    </button>
    <!-- #endif -->
    <view class="action-item" @click="emits('introClick')">
      <image src="/static/images/video/ico_episode.svg" class="action-img"></image>
      <text class="action-text">选集</text>
    </view>
  </view>
</template>

<script setup lang="ts">
  import type { $AllSizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import type { PropType } from 'vue';

  defineOptions({
    name: 'album-operation',
  });

  defineProps({
    /** 是否可以点击 */
    safeAreaInsetsBottom: { type: String as PropType<$AllSizeUnitStr>, required: true },
    /** 距离地步的距离 */
    dramaCover: { type: String, required: true },
    /** 第几集 */
    isChasing: { type: Number, required: true },
  });

  const emits = defineEmits<{
    (e: 'chasingClick'): void;
    (e: 'introClick'): void;
  }>();
</script>

<style lang="scss" scoped>
  .action-box {
    position: absolute;
    right: 10px;
    bottom: calc(var(--window-bottom) + 220px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .avatar-box .avatar {
      width: 40px;
      height: 40px;
      border-color: #ffffff;
      border-style: solid;
      border-width: 2px;
      border-radius: 40px;
      animation: rotate 10s linear infinite;
    }

    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      background: rgba(0, 0, 0, 0);
      border: none;
      border-color: transparent;
      box-shadow: none;

      &:after {
        border: none;
        border-color: transparent;
      }

      .action-img {
        width: 30px;
        height: 30px;
      }

      .action-text {
        margin-top: 6px;
        font-size: 12px;
        line-height: 12px;
        color: #ffffff;
      }
    }
  }

  @keyframes rotate {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>
